<template>
    <div class="coal-level">
      <div class="container">
        <div
          class="coal-fill"
          :style="{
            height: fillHeight + '%',
            backgroundImage: `url(${coalTexture})`
          }"
        ></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  import coalTexture from '../assets/Coal.png' // 刚才生成的煤块图
  
  const props = defineProps<{ level: number }>()
  
  // 限制液位在 0~100% 范围内
  const fillHeight = computed(() => Math.min(Math.max(props.level, 0), 100))
  
  </script>
  
  <style scoped>
  .coal-level {
    width: 100%;
    height: 100%;
  }
  
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #317077; /* 背景为煤仓 */
    border: 2px solid #0ff;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .coal-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-repeat: repeat;
    background-size: contain;
    transition: height 0.5s ease-in-out;
  }
  </style>
  